<template>
  <div class="home">
    <div class="title-container">
      <div class="search-content">
        <el-form :model="searchModel" :inline="true">
          <el-form-item>
            <el-input
              v-model="searchModel.userName"
              :disabled="detailsDisabled"
              placeholder="请输入角色姓名"
              prefix-icon="el-icon-search"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="searchClick"
              size="medium">搜索
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <el-card>
      <div class="addAccount">
        <perButton label="新建角色"
                   type="primary"
                   icon="el-icon-plus"
                   size="medium"
                   perms="ROLE_ADD"
                   @click="handlerAccount"></perButton>
        <el-button
          type="success"
          icon="el-icon-refresh"
          size="medium"
          @click="refresh">刷新
        </el-button>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        style="width: 100%"
        class="elTable"
        ref="tableRef">
        <el-table-column type="index" label="序号" width="80" align="center"/>
        <el-table-column prop="roleName" label="角色名称" align="center"/>
        <el-table-column prop="roleDes" label="角色描述" align="center"/>
        <el-table-column prop="createByName" label="创建人" align="center"></el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime" width="170">
          <template slot-scope="scope">
            {{ scope.row.createTime }}
          </template>
        </el-table-column>
        <el-table-column prop="updateByName" label="更新人" align="center"></el-table-column>
        <el-table-column label="更新时间" align="center" prop="createTime" width="170">
          <template slot-scope="scope">
            {{ scope.row.updateTime }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300" align="center">
          <template #default="{ row }">
            <perButton label="分配操作权限"
                       type="primary"
                       size="mini"
                       :disabled="row.roleCode == 'RO001'"
                       perms="ROLE_BUTTON"
                       @click="handlerOperationPermission(row)"></perButton>
            <perButton label="编辑"
                       type="warning"
                       size="mini"
                       :disabled="row.roleCode == 'RO001'"
                       perms="ROLE_EDIT"
                       @click="handlerEdit(row)"></perButton>
            <perButton label="删除"
                       type="danger"
                       size="mini"
                       :disabled="row.roleCode == 'RO001'"
                       perms="ROLE_DEL"
                       @click="handlerDelete(row)"></perButton>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        class="pagination"
        :total="count"
        :page.sync="pageIndex"
        :limit.sync="pageSize"
        @pagination="pagination"
      />
    </el-card>

    <!-- 弹框 -->
    <yc-dialog ref="ycDialog" :centerTitle="centerTitle" :dialogTitle="dialogTitle">
      <template #content>
        <div class="dialog-content">
          <el-form
            ref="roleModelRef"
            :model="newAccountModel"
            :rules="rules"
            label-width="90px"
          >
            <el-form-item label="角色名称" prop="roleName">
              <el-input
                v-model="newAccountModel.roleName"
                :disabled="detailsDisabled"
              />
            </el-form-item>
            <el-form-item label="角色描述">
              <el-input
                v-model="newAccountModel.roleDes"
                :disabled="detailsDisabled"
              />
            </el-form-item>
          </el-form>
          <div class="table">
            <el-table
              ref="multipleTable"
              :data="tableData2"
              tooltip-effect="dark"
              style="width: 100%"
              @select="select"
              @select-all="selectAll"
              @selection-change="handleSelectionChange"
              :tree-props="{
                label: 'menuName',
                children: 'children',
                hasChildren: 'hasChildren'
              }"
              row-key="id"
              :select-on-indeterminate="true"
            >
              <el-table-column type="selection" :reserve-selection="true" width="55">
                <!--                <template slot-scope="scope">-->
                <!--                  <el-checkbox v-model="scope.row.IsAdjust" :indeterminate="scope.row.isIndeterminate"-->
                <!--                               @change="adjustCheck(scope.row)"/>-->
                <!--                </template>-->
              </el-table-column>
              <el-table-column prop="menuName" label="菜单名称" width="220">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </template>
      <template #footer>
        <el-button type="primary" :loading="addOrUpdateLoading" @click="dialogSave">确定</el-button>
        <el-button @click="$refs.ycDialog.dialogVisible = false">取消
        </el-button>
      </template>
    </yc-dialog>

    <!-- 项目权限 -->
    <yc-dialog ref="equipmentDialog" centerTitle="项目权限" dialogTitle="分配项目权限">
      <template #content>
        <el-form :model="equipmentModel" :inline="true">
          <el-form-item label="项目名称:">
            <el-input v-model="equipmentModel.name" placeholder="请输入项目名称"/>
          </el-form-item>
          <el-form-item label="项目编码:">
            <el-input v-model="equipmentModel.name" placeholder="请输入项目编码"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">查询</el-button>
          </el-form-item>
        </el-form>
        <el-table max-height="200px" border :data="equipmentList" ref="tableRef">
          <el-table-column type="index" label="序号" width="80" align="center"/>
          <el-table-column prop="projectName" label="项目名称" align="center"/>
          <el-table-column prop="projectCode" label="项目编码" align="center"/>
          <el-table-column prop="projectDes" label="项目描述" align="center"/>
          <el-table-column label="" align="center">
            <template slot-scope="scope">
              <el-button
                :type="equipmentSelectList.findIndex(item => item.projectCode == scope.row.projectCode) == -1 ? 'primary' : 'danger'"
                size="mini" @click="onEquipmentSelect(scope.row)">{{ equipmentSelectList.findIndex(item =>
                item.projectCode
                ==
                scope.row.projectCode) == -1 ? "选择" : "删除" }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="mt-4 mb-2" style="margin: 10px 0;">已选择项目</div>
        <el-table max-height="200px" border :data="equipmentSelectList" ref="tableRef">
          <el-table-column type="index" label="序号" width="80" align="center"/>
          <el-table-column prop="projectName" label="项目名称" align="center"/>
          <el-table-column prop="projectCode" label="项目编码" align="center"/>
          <el-table-column prop="projectDes" label="项目描述" align="center"/>
          <el-table-column label="分配权限" align="center">
            <template slot-scope="scope">
              <el-select v-model="equipmentSelectList[scope.$index].overviewOrManage" placeholder="请选择">
                <el-option v-for="item in equipmentOptions"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="" align="center">
            <template slot-scope="scope">
              <el-button type="danger" size="mini" @click="onEquipmentSelect(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template #footer>
        <el-button type="primary" :loading="projectPermission" @click="onEquipmentSave">保存</el-button>
        <el-button @click="$refs.equipmentDialog.dialogVisible = false">取消
        </el-button>
      </template>
    </yc-dialog>


    <!-- 操作权限 -->
    <yc-dialog ref="operationPermissionDialog" centerTitle="操作权限" dialogTitle="操作权限">
      <template #content>
          <div v-for="(item, index) in roleButtonList" :key="index" class="mb-3">
            <el-checkbox
              @change="(val) => handleCheckAllListChange(val, item)"
              :indeterminate="itemIndeterminate(item)"
              v-model="item.checkAll"
            >{{ item.menuName }}</el-checkbox>
            <el-checkbox-group
              v-model="checkedData"
              @change="handleCheckedCitiesChange"
              style="padding-left: 30px;">
              <el-checkbox
                class="mt-3"
                v-for="items in item.roleButton"
                :key="items.buttonCode"
                :label="items"
              >{{ items.buttonName }}</el-checkbox>
            </el-checkbox-group>
          </div>
      </template>
      <template #footer>
        <el-button type="primary" :loading="projectPermission" @click="saveOperationPermission">保存</el-button>
        <el-button @click="$refs.operationPermissionDialog.dialogVisible = false">取消</el-button>
      </template>
    </yc-dialog>

    <!-- 封装操作后弹框 -->
    <global-message
      v-if="isGlobalMessageShow"
      @receive="receive"
      :message="message"
    />
  </div>
</template>

<script>
  import {
    queryRolePage,
    queryOneRole,
    updateRole,
    insertRole,
    deleteRole,
    queryAllProject,
    queryListRoleToProject,
    insertRoleToProject,
    queryRoleBindMen,
    insertRoleBindMenButton
  } from "@/api/userControl/role"
  import ycDialog from "@/components/pageDialog"
  import perButton from "@/components/permissionButton"

  export default {
    data() {
      return {
        isGlobalMessageShow: false,
        isGlobalMessageBoxShow: false,
        messageTitleDes: "",
        message: "",
        messageBoxSaveShow: false,
        tableData: [],
        count: 0,
        pageIndex: 1,
        pageSize: 20,
        count2: 10,
        pageIndex2: 1,
        pageSize2: 20,
        drawerTitle: "账户详情",
        detailsDisabled: false, //详情 如果为true代表禁用状态
        selectOptions: [
          {
            label: "正常/停用状态（全部）",
            value: null
          },
          {
            label: "正常",
            value: 1
          },
          {
            label: "禁用",
            value: 0
          }
        ],
        searchModel: {
          userName: "",
          status: "" //正常/停用状态（全部）
        },

        newAccountModel: {
          roleName: "",
          roleDes: "",
          roleCode: ""
        },
        centerTitle: "",
        dialogTitle: "",
        loading: false,
        tableData2: [],
        multipleSelection: [],
        editorId: "",
        rules: {
          roleName: [
            { required: true, message: "请输入角色名称", trigger: "blur" }
          ]
        },
        checkAll: false,
        isIndeterminate: false,
        checkedRoleButtons: [],

        // 项目权限搜索框
        equipmentModel: {
          name: "",
          code: ""
        },
        equipmentList: [], //项目权限列表
        equipmentSelectList: [], //项目权限列表
        equipmentOptions: [{
          value: "0",
          label: "地图概览"
        }],
        roleCode: "",
        roleButtonList: [],
        checkedData: [],
        addOrUpdateLoading: false,
        projectPermission: false
      }
    },
    components: {
      ycDialog,
      perButton
    },
    created() {
      this.getAccountData()
    },
    methods: {
      /**
       * 获取表格方法
       */
      async getAccountData(pageIndex = 1, pageSize = 20, tableInfo) {
        this.loading = true
        if (tableInfo) {
          const { userName, status } = tableInfo
          const { object } = await queryRolePage({
            pageIndex,
            pageSize,
            roleName: userName
          })
          this.tableData = object.data
          this.count = object.count
          this.loading = false
        } else {
          const { object } = await queryRolePage({
            pageIndex,
            pageSize
          })
          this.tableData = object.data
          this.count = object.count
          this.loading = false
        }
      },
      pagination(pageItem) {
        this.getAccountData(pageItem.page, pageItem.limit)
      },
      pagination2(pageItem) {
        this.queryOneRole(pageItem.page, pageItem.limit)
      },

      // 分配项目权限
      handlerEditEquipment(row) {
        this.projectPermission = false
        this.roleCode = row.roleCode
        this.queryConfigurableDevice()
        this.queryListRoleToProject(row.roleCode)
        this.$refs.equipmentDialog.dialogVisible = true
      },
      //查询项目列表
      queryConfigurableDevice() {
        queryAllProject().then(res => {
          // res.object.data.map(item => {
          //   item.rOrW = 'read'
          //   return item
          // })
          this.equipmentList = res.object
          // this.equipmentPage.total = res.object.count
        })
      },
      queryListRoleToProject(roleCode) {
        queryListRoleToProject({
          roleCode: roleCode
        }).then(res => {
          // console.log(res)
          this.equipmentSelectList = res.object
        })
      },
      // 选择项目
      onEquipmentSelect(row) {
        let obj = JSON.parse(JSON.stringify(row))
        obj.overviewOrManage = "0"
        let index = this.equipmentSelectList.findIndex(item => item.projectCode == row.projectCode)
        if (index == -1) {
          // row.rOrW = 'read'
          this.equipmentSelectList.push(obj)
        } else {
          this.equipmentSelectList.splice(index, 1)
        }
      },
      //项目权限弹窗保存
      onEquipmentSave() {
        this.projectPermission = true
        let arr = this.equipmentSelectList.map(item => {
          return {
            projectCode: item.projectCode,
            projectName: item.projectName,
            projectDes: item.projectDes,
            overviewOrManage: item.overviewOrManage
          }
        })
        insertRoleToProject({
          roleCode: this.roleCode,
          MapString1: JSON.stringify(arr)
        }).then(res => {
          if (res.status == "200") {
            this.$message.success(res.message)
            this.$refs.equipmentDialog.dialogVisible = false
          }
        })
        this.projectPermission = false
      },


      async handlerOperationPermission({ roleCode }) {
        this.roleButtonList = []
        this.checkedData = []
        this.roleCode = roleCode
        await queryRoleBindMen({ roleCode }).then(res => {
          this.roleButtonList = res.object
          // 添加checkAll是否全选
          this.roleButtonList = this.roleButtonList.map((v) => ({
            ...v,
            checkAll: false
          }));
          this.roleButtonList.forEach((item) => {
            let newChild = item.roleButton.filter((v) => {
              return v.isCheck;
            });
            if (newChild.length == item.roleButton.length) {
              item.checkAll = true;
            } else {
              item.checkAll = false;
            }
          });
          res.object.forEach((item) => {
            item.roleButton.forEach((v) => {
              if (v.isCheck) {
                this.checkedData.push(v);
              }
            });
          });
        })
        this.$refs.operationPermissionDialog.dialogVisible = true
      },
      // 全选
      handleCheckAllListChange(val, item) {
        // 过滤掉没有选中的数据，item.child中不包含v时返回-1
        const filterArr = this.checkedData.filter((v) =>
          item.roleButton.indexOf(v) == -1
        );
        this.checkedData = val ? filterArr.concat(item.roleButton) : filterArr;
      },
      // 是否全选
      itemIndeterminate(item) {
        return (
          item.roleButton.some((v) => this.checkedData.indexOf(v) > -1) &&
          !item.roleButton.every((v) => this.checkedData.indexOf(v) > -1)
        );
      },
      handleCheckedCitiesChange(val) {
        this.roleButtonList.forEach((item) => {
          item.checkAll = true;
          item.roleButton.forEach((v) => {
            if (!this.checkedData.includes(v)) {
              item.checkAll = false;
            }
          });
        });
      },
     async saveOperationPermission() {
        this.projectPermission = true
        let arr = this.checkedData.map(item => {
          return item.buttonCode
        })
        await insertRoleBindMenButton({
          roleCode: this.roleCode,
          buttonString: arr.toString()
        }).then(res => {
          if (res.status == "200") {
            this.$message.success(res.message)
            this.$refs.operationPermissionDialog.dialogVisible = false
          }
          this.projectPermission = false
        })
      },
      /**
       * 修改按钮
       */
      async handlerEdit(row) {
        this.centerTitle = "编辑"
        this.dialogTitle = "编辑"
        this.editorId = row.id
        if (this.$refs.multipleTable) {
          this.$refs.multipleTable.clearSelection()
        }

        await this.queryOneRole(row)
        this.addOrUpdateLoading = false
        this.$refs.ycDialog.dialogVisible = true
        if (this.$refs.roleModelRef) {
          this.$refs.roleModelRef.clearValidate()
          this.$refs.roleModelRef.resetFields()
        }
        this.detailsDisabled = false
        this.newAccountModel.roleName = row.roleName
        this.newAccountModel.roleCode = row.roleCode
        this.newAccountModel.roleDes = row.roleDes
      },
      async queryOneRole(val) {
        let params = {}
        if (val) {
          params = {
            pageIndex: this.pageIndex2,
            pageSize: this.pageSize2,
            roleCode: val.roleCode
          }
        } else {
          params = {
            pageIndex: this.pageIndex2,
            pageSize: this.pageSize2
          }
        }

        const data = await queryOneRole(params)
        this.tableData2 = data.object.menu
        // let myData = data.object.menu
        // this.tableData2 = this.deepClone(myData)
        // console.log(this.tableData2, "tableData2")
        this.checkShow(data.object.menu, true)
      },

      deepClone(source) {
        if (!source && typeof source !== "object") {
          throw new Error("error arguments", "deepClone")
        }
        const targetObj = source.constructor === Array ? [] : {}
        Object.keys(source).forEach(keys => {
          if (source[keys] && typeof source[keys] === "object") {
            targetObj[keys] = this.deepClone(source[keys])
            targetObj["IsAdjust"] = false
          } else {
            targetObj[keys] = source[keys]
            targetObj["IsAdjust"] = false
          }
        })
        return targetObj
      },

      checkShow(data, isShow) {
        data.forEach((e) => {
          if (e.messages == "1") {
            setTimeout(() => {
              this.$refs.multipleTable.toggleRowSelection(e, isShow)
              if (e.children.length) {
                e.children.forEach((v) => {
                  if (v.messages == "1") {
                    this.$refs.multipleTable.toggleRowSelection(v, isShow)
                  }
                })
              }
            })
          }
        })
      },
      /**
       * 删除按钮
       */
      async handlerDelete({ id }) {
        this.$confirm("确定删除此角色吗", "删除操作", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "error",
          center: true
        }).then(async () => {
          const { message } = await deleteRole({ id })
          if (message == "删除成功") {
            this.getAccountData()
            this.isGlobalMessageShow = true
            this.message = "success"
          } else {
            this.message = "error"
          }
        })
      },

      // 搜索按钮
      async searchClick() {
        this.getAccountData(1, 20, this.searchModel)
      },
      /**
       * 新建账户
       * */
      async handlerAccount() {
        this.centerTitle = "添加"
        this.dialogTitle = "添加"
        if (this.$refs.multipleTable) {
          this.$refs.multipleTable.clearSelection()
        }
        this.queryOneRole()
        this.editorId = ""
        this.addOrUpdateLoading = false
        this.detailsDisabled = false
        this.$refs.ycDialog.dialogVisible = true
        if (this.$refs.roleModelRef) {
          this.$refs.roleModelRef.clearValidate()
          this.$refs.roleModelRef.resetFields()
        }
        Object.keys(this.newAccountModel).forEach((item) => {
          this.newAccountModel[item] = ""
        })
        this.checkShow(this.tableData2, false)
        // this.$refs.multipleTable.clearSelection()
      },
      dialogSave() {
        this.$refs.roleModelRef.validate(async (v) => {
          if (v) {
            this.addOrUpdateLoading = true
            const arr = []
            this.multipleSelection.forEach((e) => {
              arr.push(e.id + "-" + "menu")
            })
            const str = arr.join(",")
            if (this.detailsDisabled) {
              // 详情的确定
              this.$refs.ycDialog.dialogVisible = false
            } else if (this.editorId) {
              const { roleCode, roleName, roleDes } = this.newAccountModel
              const { message, status } = await updateRole({
                roleCode,
                roleName,
                roleDes,
                menusString: str,
                id: this.editorId
              })

              if (status == 200) {
                this.$message.success(message)
                this.getAccountData()
                this.$refs.ycDialog.dialogVisible = false
              }
            } else {
              const { message, status } = await insertRole({
                ...this.newAccountModel,
                menusString: str
              })

              if (status == 200) {
                this.$message.success(message)
                this.getAccountData()
                this.$refs.ycDialog.dialogVisible = false
              }
            }
            this.addOrUpdateLoading = false
          }
        })
      },
      /**
       * 刷新
       */
      refresh() {
        this.searchModel = {}
        this.getAccountData()
      },
      /**
       * globalMessage的知道按钮的方法
       * */
      receive() {
        this.isGlobalMessageShow = false
      },


      async messageBoxSave(show) {
        this.messageBoxSaveShow = show
      },

      handleSelectionChange(val) {
        console.log(val, "handleSelectionChange")
        this.multipleSelection = val
      },

      adjustCheck(row) {
        // 全选、全不选
        if (row.children) {
          if (row.IsAdjust) {
            row.children.map(item => {
              item.IsAdjust = true
            })
          } else {
            row.children.map(item => {
              item.IsAdjust = false
            })
          }
        }
        this.tableData2.map(item => {
          if (item.children) {
            item.children.map(it => {
              if (it.fatherId === row.fatherId) {
                item.IsAdjust = true
              }
            })
            // 子项都选中
            const all = item.children.every(flag => flag.IsAdjust)
            if (all) {
              item.IsAdjust = true
              item.isIndeterminate = false
            }
            const some = item.children.some(flag => flag.IsAdjust)
            // 部分选中半选择状态
            if (some) {
              if (!all) {
                item.isIndeterminate = true
              }
            } else {
              item.IsAdjust = false
              item.isIndeterminate = false
            }
          }
        })
      },

      setChildren(children, type) {
        // 编辑多个子层级
        children.map((j) => {
          this.toggleSelection(j, type)
          if (j.children.length > 0) {
            this.setChildren(j.children, type)
          }
        })
      },
      toggleSelection(row, select) {
        if (row) {
          this.$nextTick(() => {
            this.$refs.multipleTable &&
            this.$refs.multipleTable.toggleRowSelection(row, select)
          })
        }
      },
      getKey(row) {
        return row.menuCode
      },
      // 选中父节点时，子节点一起选中取消
      select(selection, row) {
        if (row.children.length) {
          const hasSelect = selection.some((el) => {
            return row.id === el.id
          })

          if (hasSelect) {
            if (row.children.length > 0) {
              // 解决子组件没有被勾选到
              this.setChildren(row.children, true)
            }
          } else {
            if (row.children.length > 0) {
              this.setChildren(row.children, false)
            }
          }
        }

        this.tableData2.forEach((item) => {
          if (item.id === row.fatherId) {
            this.$nextTick(() => {
              this.$refs.multipleTable &&
              this.$refs.multipleTable.toggleRowSelection(item, true)
            })
          }
        })
      },


      // 选择全部 
      selectAll(selection) {
        // if(selection.length > 0) {
        //   this.deepClone2(selection)
        // } else {
        //   this.deepClone3(this.tableData2)
        // }
        // console.log(selection, "1111")
        // tabledata第一层只要有在selection里面就是全选
        const isSelect = selection.some((el) => {
          const tableDataIds = this.tableData2.map((j) => j.id)
          return tableDataIds.includes(el.id)
        })
        // tableDate第一层只要有不在selection里面就是全不选
        const isCancel = !this.tableData2.every((el) => {
          const selectIds = selection.map((j) => j.id)
          return selectIds.includes(el.id)
        })
        if (isSelect) {
          selection.map((el) => {
            if (el.children) {
              // 解决子组件没有被勾选到
              this.setChildren(el.children, true)
            }
          })
        }
        if (isCancel) {
          this.tableData2.map((el) => {
            if (el.children) {
              // 解决子组件没有被勾选到
              this.setChildren(el.children, false)
            }
          })
        }
      },
      deepClone2(source) {
        if (!source && typeof source !== "object") {
          throw new Error("error arguments", "deepClone")
        }
        // const targetObj = source.constructor === Array ? [] : {}
        Object.keys(source).forEach(keys => {
          if (source[keys] && typeof source[keys] === "object") {
            this.deepClone2(source[keys])
          } else {
            source["IsAdjust"] = true
          }
        })
        // return targetObj
      },
      deepClone3(source) {
        if (!source && typeof source !== "object") {
          throw new Error("error arguments", "deepClone")
        }
        // const targetObj = source.constructor === Array ? [] : {}
        Object.keys(source).forEach(keys => {
          if (source[keys] && typeof source[keys] === "object") {
            this.deepClone3(source[keys])
          } else {
            source["IsAdjust"] = false
          }
        })
        // return targetObj
      }
    }
  }
</script>

<style lang="scss" scoped>
  .status {
    display: inline-block;
    padding: 0 10px;
  }

  .title-container {
    display: flex;
    justify-content: flex-end;
    height: 60px;

    .search-content {
      /*margin: 10px 20px;*/
      display: flex;
    }

    .addAccount {
      margin: 10px 20px;
    }
  }

  .pagination {
    display: flex;
    justify-content: flex-end;
  }

  .content {
    height: 600px;

    .drawer-title {
      font-weight: 400;
      font-size: 24px;
      color: #000000;
      text-align: center;
      padding: 36px 0;
    }

    .form {
      padding: 0 10px;
    }
  }

  .footer {
    height: 360px;
    display: flex;
    align-items: flex-end;
    // justify-content: st-end;
    padding: 5px 20px;
  }
</style>
